import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";

// 类式组件
// class Demo extends React.Component {
//     state = { count: 0 };

//     myRef = React.createRef();

//     componentDidMount() {
//         this.timer = setInterval(() => {
//             this.setState((state) => ({ count: state.count + 1 }));
//         }, 1000);
//     }

//     componentWillUnmount() {
//         clearInterval(this.timer);
//         this.timer = null;
//     }

//     increase = () => {
//         this.setState((state) => ({ count: state.count + 1 }));
//     };

//     unmount = () => {
//         ReactDOM.unmountComponentAtNode(document.getElementById("root"));
//     };

//     show = () => {
//         alert(this.myRef.current.value);
//     };

//     render() {
//         return (
//             <div>
//                 <input type="text" ref={this.myRef} />
//                 <h2>当前求和为：{this.state.count}</h2>
//                 <button onClick={this.increase}>点我+1</button>
//                 <button onClick={this.unmount}>卸载组件</button>
//                 <button onClick={this.show}>点击提示数据</button>
//             </div>
//         );
//     }
// }

function Demo() {
    // ------------------- Hooks start ----------------------

    /**
     * useState(初始state)方法返回一个数组
     * 数组中第一个元素为状态，第二个元素为更新状态的方法（setState）
     */
    const [count, setCount] = useState(0);

    // 状态可以用对象，但是在修改状态对象时必须提供状态对象中的所有属性，否则会丢失未提供的属性
    // const [state, setState] = useState({ count: 0, name: "King" });

    /**
     * useEffect(钩子函数, 监听状态列表)相当于componentDidMount或componentDidUpdate
     * 默认不传监听状态列表时监听所有状态变更，相当于componentDidUpdate；传入空数组指不监听任何状态变更，即相当于componentDidMount
     * 可以通过监听状态列表对状态变更后进行精细化处理
     */
    useEffect(() => {
        const timer = setInterval(() => {
            setCount((count) => count + 1);
        }, 1000);

        // 钩子函数返回的函数相当于componentWillUnmount
        return () => {
            clearInterval(timer);
        };
    }, []);

    /**
     * useRef()
     */
    const myRef = useRef();

    // ------------------- Hooks end ----------------------

    const increase = () => {
        // 第一种写法
        // setCount(count + 1);
        // 第二种写法
        setCount((count) => count + 1);

        // 单独提供对象的个别属性会导致其它属性丢失
        // setState({ count: state.count + 1 });
    };

    const unmount = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById("root"));
    };

    const show = () => {
        alert(myRef.current.value);
    };

    return (
        <div>
            <input type="text" ref={myRef} />
            <h2>当前求和为：{count}</h2>
            <button onClick={increase}>点我+1</button>
            <button onClick={unmount}>卸载组件</button>
            <button onClick={show}>点击提示数据</button>
        </div>
    );
}

export default Demo;
